<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link>
    <link rel="stylesheet" type="text/css" href="../static/sb-admin-2/css/sb-admin-2.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/mcss/mcss_register.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/mcss/model/component-1.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/chosen.min.css"/>
</head>
<body>
<div>
    <div class="card shadow mb-4" style="margin-left: 2.5%;height: 800px">
        <div class="card-body">
            <div style=" margin-left: 1%;margin-right: 1%">

                <div class="textbox">
                    卡号<input type="text" readonly="readonly" id="cardid">
                    <div class="mybtn1">
                        <button class="btn btn-info" onclick="getCardIdInfor()">读取就诊卡信息</button>
                    </div>
                    <div class="mybtn">
                        <a href="#mymodal_1">
                            <button class="btn btn-info">新办就诊卡</button>
                        </a>

                    </div>
                </div>

                <div class="textbox_2">

                    姓名<input type="text" id="IDname" style="width: 120px" readonly="readonly">&emsp;
                    性别<input type="text" id="IDsex" style="width: 90px" readonly="readonly">&emsp;
                    民族<input type="text" id="IDnationality" style="width: 90px" readonly="readonly">&emsp;
                    出生日期<input type="text" id="IDbirthday" style="width:150px" readonly="readonly">

                </div>


                <div class="textbox_3">
                    <div>
                        选择科室
                        <select class='chosen select' data-placeholder=' '>
                             
                            <option value=""></option>
                            <optgroup label="内科">
                                   
                                <option value="volvo">呼吸内科</option>
                                   
                                <option value="saab">Saab</option>
                                 
                            </optgroup>
                             
                            <optgroup label="外科">
                                   
                                <option value="mercedes">Mercedes</option>
                                   
                                <option value="audi">Audi</option>
                                 
                            </optgroup>
                            <optgroup label="妇产科">
                                   
                                <option value="mercedes">Mercedes</option>
                                   
                                <option value="audi">Audi</option>
                                 
                            </optgroup>
                            <option value="audi">五官科</option>
                        </select>
                    </div>

                    <div style="margin-left: 25px">
                        挂号类型
                        <select class='select_1' data-placeholder=' '>
                             
                            <option value=""></option>

                            <option value="普通门诊">普通门诊</option>
                               
                            <option value="急诊">急诊</option>
                             
                        </select>
                    </div>

                    <div class="department-search">
                        <button class="btn btn-info" onclick="getRegisterDoctor()"><img class="png"
                                                                                        src="../static/images/icon/search.png">
                        </button>
                    </div>
                </div>

                <div class="register_table">
                    <table id="RegisterDoctor"></table>
                </div>


                <!--模态框-->
                <div id="mymodal_1" class="mymodal_overlay">
                    <div class="mymodal_modal modal1">
                        <div style="font-size: 1.1rem">
                            <img class="png" src="../static/images/icon/change.png">&emsp;办理就诊卡
                        </div>

                        <div style="margin-top: 35px;margin-left: 58px" class="textbox_1">

                            姓名<input type="text" id="IDname" style="width: 120px" readonly="readonly">&emsp;&emsp;&emsp;&emsp;&emsp;
                            身份证号<input type="text" id="IDcard" style="width: 320px" readonly="readonly">
                            <br>
                            <br>
                            性别<input type="text" id="IDsex" style="width: 90px" readonly="readonly">&emsp;&emsp;
                            民族<input type="text" id="IDnationality" style="width: 90px" readonly="readonly">&emsp;&emsp;
                            出生日期<input type="text" id="IDbirthday" style="width:220px" readonly="readonly">

                            <br>
                            <br>
                            <div style="display: flex">
                                <div style="margin-right: 100px">
                                    住址<input type="text" id="IDaddress" style="width: 330px" readonly="readonly">&emsp;&emsp;&emsp;
                                </div>
                                <div>
                                    <button class="btn btn-outline-primary">二代身份证阅读</button>
                                </div>
                            </div>
                            <div style="display: flex" class="cardid">
                                <div style="margin-right: 230px">
                                    卡号<input type="text" id="cardId_1" style="width: 220px" readonly="readonly">&emsp;&emsp;&emsp;
                                </div>
                                <div>
                                    <button class="btn btn-outline-primary">读取就诊卡</button>
                                </div>
                            </div>
                        </div>
                        <div class=" modal-footer
                                    ">
                            <a style="text-decoration: none" href="#">
                                <button type="button" class="btn btn-primary"
                                        href="#">取消
                                </button>
                            </a>
                            <!-- <a style="text-decoration: none" href="#">-->
                            <button type="button" class="btn btn-primary"
                                    onclick="addCardId()">确认
                            </button>
                            <!--</a>-->
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/chosen.jquery.min.js"></script>
<script>
    var department = '';
    var registerType = '';

    $('.chosen').chosen({
        no_results_text: "没有找到结果！",//搜索无结果时显示的提示
        search_contains: true,   //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
        allow_single_deselect: false, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
        disable_search: false, //禁用搜索。设置为true，则无法搜索选项。
        disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
        inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
        /*placeholder_text_single: '',*/ //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。

        max_shown_results: 7, //下拉框最大显示选项数量
        display_disabled_options: false,
        single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
        case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
        group_search: false, //选项组是否可搜。此处搜索不可搜
        include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
    }).change(function () {

        department = $(".chosen option:selected").val();
    });
    $('.select_1').chosen({disable_search: true}).change(function () {

        registerType = $(".select_1 option:selected").val();
    });

    function getRegisterDoctor() {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
    }

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#RegisterDoctor').bootstrapTable({
                url: '/register/getRegisterDoctor',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                // sortOrder: "asc",                   //排序方式
                /* queryParams: oTableInit.queryParams,*///传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                /*   pageNumber: 1,                       //初始化加载第一页，默认第一页
                   pageSize: 5,                       //每页的记录行数（*）
                   queryParamsType: "",
                   paginationPreText: "上一页",
                   paginationNextText: "下一页",*/
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 0,             //最少允许的列数
                clickToSelect: false,                //是否启用点击选中行
                // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "loginIp",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    field: 'no',
                    title: '序号',
                    sortable: true,
                    align: "center",
                    // width: 40,
                    formatter: function (value, row, index) {

                        return index + 1
                    }
                }, {
                    field: 'loginIp',
                    title: 'IP地址',
                    align: 'center',
                    valign: 'middle'
                }, {

                    field: 'loginBroswer',
                    title: '浏览器',
                    align: 'center',
                    valign: 'middle'

                }, {
                    field: 'loginAddress',
                    title: '位置',
                    align: 'center',
                    valign: 'middle'

                }, {
                    field: 'createDatetime',
                    title: '时间',
                    align: 'center',
                    valign: 'middle'
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.pageSize,   //页面大小
                pageNumber: params.pageNumber - 1 //页码
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };

        return oInit;
    };


</script>
</body>
</html>